<template>
  <div class="StatisticsLayout">
    <div class="StatisticsLayout--header">
      <div class="StatisticsLayout--header__list">
        <div class="titleItem" v-for="item in statisticsArr" :key="item.title">
          <span class="titleItem--icon"></span>
          <span class="titleItem--label">{{ item.title }}</span>
          <el-tooltip v-if="tips" :content="tips" placement="bottom">
            <span class="StatisticsLayout--header__tips"></span>
          </el-tooltip>
        </div>
      </div>
    </div>
    <div class="StatisticsLayout--content">
      <div class="StatisticsLayout--content__list">
        <div v-for="item in statisticsArr" :key="item.title" class="item">
          <div class="item--label">{{ item.name }}</div>
          <div class="item--value">
            {{ item.value }}
            <span v-if="item.unit">{{ item.unit }}</span>
          </div>
        </div>
      </div>
    </div>
    <div class="StatisticsLayout--bg">
      <div class="StatisticsLayout--bg__img">
        <img src="@/assets/images/analyse/icon_头部数据bg_网格装饰@2x.png" />
      </div>
    </div>
  </div>
</template>

<script setup>
// import BtnGroups from '@/components/common/BtnGroupsTab.vue'
// 定义props属性
defineProps({
  statisticsArr: {
    type: Array,
    default() {
      return [
        {
          title: '重点路口',
          name: '总数',
          value: 13213,
        },
        {
          title: '当日违法',
          name: '总数',
          value: 13213,
        }
      ]
    },
  },
})
</script>

<style scoped lang="scss">
.StatisticsLayout {
  width: 100%;
  height: 100%;
  padding: 16px;
  border: 1px solid #d4d4d4;
  background-color: #fff;

  &--header {
    line-height: 32px;
    position: relative;

    &__list {
      display: flex;

      .titleItem {
        flex: 1;

        &--icon {
          display: inline-block;
          width: 32px;
          height: 32px;
          background-image: url('@/assets/images/analyse/datespeed.png');
          background-size: cover;
          margin-right: 12px;
        }

        &--label {
          display: inline-block;
          width: 96px;
          font-size: 16px;
          color: #000000;
          font-weight: 500;
          position: relative;
          top: -10px;
        }
      }
    }



    &__tips {
      display: inline-block;
      width: 16px;
      height: 16px;
      background-image: url('@/assets/images/logo.png');
      background-size: cover;
      position: absolute;
      right: 0;
    }
  }

  &--content {
    &__list {
      display: flex;

      .item {
        flex: 1;
        padding-left: 44px;

        &--name {
          font-size: 16px;
          color: rgba(0, 0, 0, 0.5);
        }

        &--value {
          font-size: 28px;
          color: rgba(0, 0, 0, 0.8);
          font-weight: 700;

          span {
            font-size: 20px;
          }
        }
      }
    }
  }

  &--bg {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;

    &__img {
      width: 100%;
      max-width: 427px;
      margin: 0 auto;

      img {
        width: 100%;
        height: auto;
        max-height: 49px;
      }
    }
  }
}
</style>
